/* 学习目标：根据id，删除一条数据  */
// 🗝️🗝️ 获取数据使用useAppSelector， 不使用useSelector
// 🗝️🗝️ TS+Redux必须指定reducer函数的返回值类型
// 🗝️🗝️ TS+Redux不要action

import { useDispatch } from "react-redux";
import { useAppSelector } from "../store";
import { delByIdAction } from "../store/action/todo";

export default function Main() {
  const { list } = useAppSelector((state) => state.todo);
  const dispatch = useDispatch();
  return (
    <section className="main">
      <input id="toggle-all" className="toggle-all" type="checkbox" />
      <label htmlFor="toggle-all">全选</label>
      <ul className="todo-list">
        {list.map((item) => {
          return (
            <li className={item.isDone ? "completed" : ""} key={item.id}>
              <div className="view">
                <input className="toggle" type="checkbox" />
                <label>{item.task}</label>
                <button
                  className="destroy"
                  // 3.dispatch
                  onClick={() => dispatch(delByIdAction(item.id))}
                ></button>
              </div>
            </li>
          );
        })}
      </ul>
    </section>
  );
}
